<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css"
      rel="stylesheet">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-table.min.css">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="../js/bootstrap-table.min.js"></script>
<script src="../js/bootstrap-table-zh-CN.min.js"></script>
<body>


<div class="modal fade m-auto" id="myModal">
    <div class="modal-dialog modal-xl" style="width: 1000px;height: 800px">
        <div class="modal-content">

            <!--     制作设计单模态框       -->
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">生产工序设计单</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">
                <div class="m-auto row">
                    <!-- 父级编号 -->
                    <span id="parentId" style="display: none"></span>

                    <div class="col"><span>设计单编号:</span><span id="id"></span></div>
                    <div class="col"><span>设计人:</span><span id="designer"></span></div>
                </div>
                <div class="m-auto row" style="padding-top: 15px">
                    <div class="col"><span>产品名称:</span><span id="name"></span></div>
                    <div class="col"><span>产品编号:</span><span id="productId"></span></div>

                </div>
                <div style="padding-top: 15px">
                    <table id="tab1" class="table table-striped table-bordered table-hover">

                    </table>
                </div>
                <div><span>工时成本:</span><span id="costPriceSum"></span></div>
                <div class="m-auto row" style="padding-top: 15px">
                    <div class="col"><span>变更人:</span><span id="person"></span></div>
                    <div class="col"><span>变更时间:</span><span id="checkTime"></span></div>
                </div>
                <div class="row m-auto" style="padding-top: 15px">
                    <span class="col-3">设计要求:</span><textarea id="procedureDescribe"
                                                              style="width: 500px; height: 100px;"></textarea>
                </div>
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2" style="width: 90px;" onclick="">添加工序</button>
                <button type="button" class="btn btn-warning" style="width: 90px;" onclick="MDesignProcedureObj.BatchUpdateDesignProcedureProcess()">变更</button>
            </div>


        </div>
    </div>
</div>

<!-- 模态框 -->
<div class="modal fade" id="myModal2">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">添加工序</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body" style="width: 100%;">
                <table class="table table-striped table-bordered table-hover">
                    <thea>
                        <th>工序序号</th>
                        <th>工序名称</th>
                        <th>操作</th>
                    </thea>
                    <tbody>
                        <tr><td class="id">001</td><td class="name">组装</td><td><button onclick="MDesignProcedureObj.AddMDesignProcedure(this)" class="btn btn-primary">添加</button></td></tr>
                        <tr><td class="id">002</td><td class="name">测试</td><td><button  onclick="MDesignProcedureObj.AddMDesignProcedure(this)"class="btn btn-primary">添加</button></td></tr>
                        <tr><td class="id">003</td><td class="name">包装</td><td><button onclick="MDesignProcedureObj.AddMDesignProcedure(this)" class="btn btn-primary">添加</button></td></tr>
                    </tbody>
                </table>
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>

        </div>
    </div>
</div>

<nav class="breadcrumb">
    <a class="breadcrumb-item" href="#">生产管理</a>
    <a class="breadcrumb-item" href="#">产品生产工序设计</a>
    <a class="breadcrumb-item" active href="#">产品生产工序设计单审核</a>
</nav>

<div class="input-group mb-3" style="width: 50%">
    <div class="input-group-prepend">
        <span class="input-group-text">设计编号</span>
    </div>

    <input id="designId" type="text" class="form-control">
    &nbsp;
    <div class="input-group-prepend">
        <span class="input-group-text">产品名称</span>
    </div>

    <input id="productName" type="text" class="form-control">
    &nbsp;
    <button onclick="$('#tab').bootstrapTable('refresh')" class="btn btn-primary">查询</button>
</div>

<table id="tab">

</table>
</body>


<script>
    $(function () {

        $("#tab").bootstrapTable({
            method: "post",
            url: "/QueryMDesignProcedureAll.action",
            striped: true,
            pageNumber: 1,
            pagination: true,
            sidePagination: "server",
            pageSize: 3,
            pageList: [3, 6, 9],
            queryParams: function (i) {
                return {
                    //计算当前页
                    // currentPage:(parts.offset/parts.limit)+1,
                    pageNumber: i.offset,
                    //每条页数
                    pageSize: i.limit,
                    designId: $("#designId").val(),
                    productName: $("#productName").val(),
                    checkTag: 'S001-1'
                }
            },
            columns: [
                {title: "设计单编号", field: "designId"},
                {title: "产品编号", field: "productId",},
                {title: "产品名称", field: "productName"},
                {title: "设计人", field: "designer"},
                {title: "登记时间", field: "registerTime"},
                {title: "工时总成本", field: "costPriceSum"},
                {
                    title: "变更", field: "id", align: "center",
                    formatter: function (value, row, index) {
                        return "<button onclick='MDesignProcedureObj.MDesignProcedureText(" + JSON.stringify(row) + ")' class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#myModal\">变更</button>";
                    }
                }

            ]
        })
    })
</script>

<script>
    var labourHourAmount=0;
    var costPrice=0;
    var MDesignProcedureObj = {



        MDesignProcedureText: function (MDesignProcedure) {
            $('#tab1').bootstrapTable('destroy');

            $("#id").text(MDesignProcedure.designId)//设计单编号
            $("#designer").text(MDesignProcedure.designer)//设计人
            $("#name").text(MDesignProcedure.productName)//产品名称
            $("#productId").text(MDesignProcedure.productId)//产品编号
            $("#costPriceSum").text(MDesignProcedure.costPriceSum)//工时成本
            $("#checkTime").text(new Date().toLocaleString())//审核时间
            $("#procedureDescribe").val(MDesignProcedure.procedureDescribe)//设计要求
            $("#parentId").text(MDesignProcedure.id)
            console.log(JSON.stringify(MDesignProcedure))

            //获取当前等人账号
            $.ajax({
                type: "post",
                url: "/user.action",
                success: function (i) {
                    $("#person").text(i.loginId)//审核人
                }
            })

            $("#tab1").bootstrapTable({
                method: "get",
                url: "/queryMDesignProcedureDetailsByParentId.action",
                striped: true,
                queryParams: function (params) {
                    return {
                        id: MDesignProcedure.id
                    }
                },
                columns: [
                    {title: "序号", field: "id",formatter:function (value, row, index){
                        return "<span>"+value+"</span>"
                        }},
                    {title: "工序名称", field: "procedureName"},
                    {title: "工序编号", field: "procedureId"},
                    {
                        title: "描述", field: "procedureDescribe", formatter: function (value, row, index) {
                            return "<input style='width: 100px' value='" + value + "'>"
                        }
                    },
                    {
                        title: "工时数", field: "labourHourAmount", formatter: function (value, row, index) {
                            return  "<input id='"+"labourHourAmount"+row.id+"' onblur ='MDesignProcedureObj.Sum("+JSON.stringify(row)+")' class='calculate' type='number' style='width: 100px' value='" + value + "'>"
                        }
                    },
                    {
                        title: "单位", field: "amountUnit", formatter: function (value, row, index) {
                            return "<input class='calculate' style='width: 100px' value='" + value + "'>"
                        }
                    },
                    {
                        title: "单位工时成本", field: "costPrice", formatter: function (value, row, index) {
                            return "<input id='"+"costPrice"+row.id+"' onblur ='MDesignProcedureObj.Sum("+JSON.stringify(row)+")' class='calculate' type='number' style='width: 100px' value='" + value + "'>"
                        }
                    },
                    {title: "工时成本小计(元)", field: "subtotal",formatter:function (value, row, index){
                            var span="<span id='"+row.id+"'>"+value+"</span>"
                             return span;

                        }},
                    {
                        title: "删除工序", field: "id", align: "center", formatter: function (value, row, index) {
                            return "<button onclick='MDesignProcedureObj.connt(),MDesignProcedureObj.DeleteMDesignProcedure("+JSON.stringify(row)+")' class='btn btn-primary'>删除</button>"
                        }
                    }
                ]
            })
        },
        AddMDesignProcedure:function (i){
            var mDesignProcedureDetails={
                parentId:$("#parentId").text(),
                procedureName:$(i).parent("td").siblings('.name').text(),
                procedureId:$(i).parent("td").siblings('.id').text()
            }

            $.ajax({
                type: "post",
                url:"/AddMDesignProcedureProcess.action",
                data:JSON.stringify(mDesignProcedureDetails),
                contentType:"application/json;charset=utf-8",
                success:function (value){
                    if(value>0){
                        alert("添加成功");
                        $("#tab1").bootstrapTable("refresh")
                        $("#myModal2").modal("hide");
                    }
                }
            })

        },
        DeleteMDesignProcedure:function (i){
            $.ajax({
                type:"post",
                url:"/DeleteMDesignProcedure.action",
                data:"id="+i.id,
                success:function (value){
                    if(value>0){
                        alert("删除成功")
                        $("#tab1").bootstrapTable("refresh")
                    }
                }
            })
        },
        Sum:function (v){
          $("#"+v.id+"").text($("#labourHourAmount"+v.id+"").val()*$("#costPrice"+v.id+"").val())
            this.connt();
        },
        connt:function (){
            var cont=0
            $.each($("#tab1>tbody>tr"),function (i,v){
                var obj= $(v)
                cont+=parseInt(obj.children().eq(7).find('span').text())
            })
            $("#costPriceSum").text(cont)
        },
        BatchUpdateDesignProcedureProcess:function (){

            var result=[]
            var mDesignProcedure={
                changer:$("#person").text(),
                changeTime:$("#checkTime").text(),
                procedureDescribe:$("#procedureDescribe").val(),
                id:$("#parentId").text()
            }


            $.each($("#tab1>tbody>tr"),function (i,v){
                var mDesignProcedureDetails={};
                var id=$("#tab1>tbody>tr").eq(i).children().eq(0).find("span").text()
                var procedureDescribe=$("#tab1>tbody>tr").eq(i).children().eq(3).find("input").val()
                var labourHourAmount=$("#tab1>tbody>tr").eq(i).children().eq(4).find("input[type='number']").val()
                var amountUnit=$("#tab1>tbody>tr").eq(i).children().eq(5).find("input").val()
                var costPrice=$("#tab1>tbody>tr").eq(i).children().eq(6).find("input[type='number']").val()
                var subtotal=$("#tab1>tbody>tr").eq(i).children().eq(7).find("span").text()
                var parentId=$("#parentId").text()

                mDesignProcedureDetails.procedureDescribe=procedureDescribe;
                mDesignProcedureDetails.labourHourAmount=labourHourAmount;
                mDesignProcedureDetails.amountUnit=amountUnit;
                mDesignProcedureDetails.costPrice=costPrice;
                mDesignProcedureDetails.subtotal=subtotal;
                mDesignProcedureDetails.id=id;
                mDesignProcedureDetails.parentId=parentId;

                result.push(mDesignProcedureDetails)
            })

            var a={
                mDesignProcedure:mDesignProcedure,
                mDesignProcedureDetails:result
            }

            $.ajax({
                type:"post",
                url:"/BatchUpdateDesignProcedureProcess.action",
                data:JSON.stringify(a),
                contentType: "application/json;charset=utf-8",
                success:function (i){
                    if(i>0){

                        var MDesignProcedure={
                            id:$("#parentId").text(),
                            costPriceSum:$("#costPriceSum").text()
                        }
                        $.ajax({
                            type:"post",
                            url:"/updateCostPriceSumById.action",
                            data:JSON.stringify(MDesignProcedure),
                            contentType:"application/json;charset=utf-8",
                            success:function (i){
                                if(i>0){
                                alert("变更成功")
                                $("#tab").bootstrapTable('refresh')
                                $("#myModal").modal('hide');
                                }
                            }
                        })
                    }
                }
            })


        }

    }
</script>


</html>